<template>
  <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
    <a-spin :spinning="loading">
      <a-form
        layout="inline"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
      >
        <a-form-item>
          <a-date-picker
            v-model:value="pageable.date"
            allowClear
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
            style="width: 180px"
          />
        </a-form-item>
        <a-form-item label="">
          <a-select
            placeholder="请选择接收人"
            v-model:value="pageable.toUser"
            style="width: 150px"
            allowClear
          >
            <a-select-option
              v-for="(item, idx) in toUserOpts"
              :key="idx"
              :value="item.value"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item label="">
          <a-input
            style="width: 200px"
            placeholder="请输入搜索内容"
            v-model:value="pageable.searchContent"
            allowClear
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="handleSearch" html-type="submit">
            搜索
          </a-button>
        </a-form-item>
      </a-form>

      <!-- table start -->
      <a-table
        rowKey="id"
        :defaultExpandAllRows="true"
        :columns="columns"
        :style="{ marginTop: '20px' }"
        :data-source="data"
        :pagination="pageable"
        @change="handleTableChange"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'isOpen'">
            <a-tag color="red" v-show="record.isOpen == 'No'">否</a-tag>
            <a-tag color="green" v-show="record.isOpen == 'Yes'">是</a-tag>
          </template>
          <template v-if="column.key == 'isDelete'">
            <a-tag color="red" v-show="record.isDelete == 'No'">否</a-tag>
            <a-tag color="green" v-show="record.isDelete == 'Yes'">是</a-tag>
          </template>
          <template v-if="column.key == 'actions'"> </template>
        </template>
      </a-table>
      <!-- table end -->
    </a-spin>
  </a-card>
</template>
<script lang="ts">
import { useRouter } from "vue-router";
import { message } from "ant-design-vue";
import { defineComponent, reactive, ref, UnwrapRef, onMounted } from "vue";
import ResultEnum from "@/config/ResultEnum";
import { tableCols, loadTable } from "./index";
import request from "@/request";
import { confirm } from "@/utils/common";

import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
dayjs.locale("zh-cn");

export default defineComponent({
  components: {},
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const data = ref([]);
    const columns = ref(tableCols);
    const detailModal = ref();
    const toUserOpts = ref([
      { name: "系统", value: "system" },
      { name: "其他人", value: "other" },
    ]);

    const pageable = ref({
      pageSize: 10,
      current: 1,
      total: 0,
      date: null,
      searchContent: "",
      toUser: null,
      showTotal(total: any, range: any) {
        return "共" + total + "条数据";
      },
    });

    onMounted(() => {
      loadData();
    });

    const handleSearch = () => {
      pageable.value.current = 1;
      pageable.value.total = 0;
      loadData();
    };

    const loadData = () => {
      loading.value = true;
      loadTable({
        page: pageable.value.current,
        limit: pageable.value.pageSize,
        searchContent: pageable.value.searchContent,
        date:
          pageable.value.date != null
            ? dayjs(pageable.value.date).format("YYYY-MM-DD")
            : "",
        toUser: pageable.value.toUser == "system" ? -1 : null,
      }).then((res: any) => {
        loading.value = false;
        let records = res.records;
        if (records && records.length > 0) {
          let index = 1;
          for (let item of records) {
            item.idx = index;
            index++;
          }
        }
        data.value = records;
        pageable.value.total = parseInt(res.total);
      });
    };

    const handleTableChange = (pagination: any, filters: any, sorter: any) => {
      pageable.value.current = pagination.current;
      loadData();
    };

    const view = (record: any) => {};

    return {
      loading,
      handleSearch,
      columns,
      data,
      pageable,
      handleTableChange,
      view,
      detailModal,
      toUserOpts,
    };
  },
});
</script>
